import { useEffect } from "react";
import '../assets/scss/home.scss'
import { Link, Outlet } from "react-router-dom";
import Menus from '../components/Menus'
import LogoImg from '../assets/images/home/logo.jpg'
import type { MenuProps } from 'antd';
import { Dropdown, Modal, message } from 'antd';
import { useNavigate, useLocation } from "react-router-dom";
import { ExclamationCircleFilled } from '@ant-design/icons';


const Home = (): JSX.Element => {

  const location = useLocation()
  const routerName = () => {
    // console.log(location.pathname)
    return location.pathname
  }
  const navigate = useNavigate()
  // 设置菜单
  const menu: any = sessionStorage.getItem('menu')
  const topMenu = JSON.parse(menu).filter((item: any) => item.pid === 0 && item.postion === "top");
  // console.log(topMenu);

  const items: MenuProps['items'] = topMenu.map((item: any, index: number) => {
    return {
      key: index,
      label: (
        <Link to={`/home${item.url}`} style={{ color: routerName() === `/home${item.url}` ? '#4180f3' : '#727e97' }}>
          <i className={`iconfont ${item.ico}`}></i>{item.name}
        </Link>
      )
    }
  });

  const routerPath = () => {
    return topMenu.some((e: any) => '/home' + e.url === location.pathname)
  }

  const goHome = () => {
    navigate('/home')
  }
  // 退出登录
  const logOut = () => {
    showConfirm()
  }

  const { confirm } = Modal;
  const showConfirm = () => {
    confirm({
      title: '确认退出吗?',
      icon: <ExclamationCircleFilled />,
      content: '',
      onOk() {
        // console.log('OK');
        sessionStorage.clear()
        navigate('/')
      },
      onCancel() {
        // console.log('Cancel');
        message.open({
          type: 'success',
          content: '已取消',
        });
      },
    });
  };
  const userName = sessionStorage.getItem('name')

  useEffect(() => {
  }, [])

  return (
    <div className="home">
      <div className="header">
        <div className="left">
          <div><img className="LogoImg" src={LogoImg} alt="" /></div>
          <div className="homepage" onClick={goHome} style={{ color: routerName() === "/home" ? '#4180f3' : '#727e97' }}>
            <span className="iconfont icon-zhuye"></span><span>首页</span>
          </div>
          <div>{userName}，周末的晚霞，别有一番风景</div>
        </div>
        <div className="right">
          <div className="set up">
            <Dropdown menu={{ items }} placement="bottom" trigger={['click']} arrow>
              <div style={{ color: routerPath() ? '#4180f3' : '#727e97' }}>
                <span className="iconfont icon-shezhi"></span>
                设置
              </div>
            </Dropdown>
          </div>
          <span className="up" onClick={logOut}>
            <span className="iconfont icon-tuichu" style={{ marginRight: ".1rem", fontWeight: "700" }}></span>
            退出登录
          </span>
        </div>
      </div>
      <div className="main">
        <div className="sider">
          <Menus></Menus>
        </div>
        <div className="content">
          <Outlet></Outlet>
        </div>
      </div>
    </div>
  )
}
export default Home;